<template>
  <div class="box">
    <div class="logo">
      <img src="../../assets/img/hot_music_bg_2x.jpg" alt="" />
      <div class="mybox">
        <div class="top"></div>
        <div class="bot">更新日期</div>
      </div>
    </div>
    <div class="wrapper">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="100"
        @load="onLoad"
      >
        <van-cell
          center
          :title="item.name"
          :label="item.ar[0].name + '-' + item.name"
          v-for="item in list2"
          :key="item.id"
        >
          <template #right-icon>
            <van-icon
              name="add-o"
              size="0.6rem"
              @click="push(item)"
              class="addo"
            />
            <van-icon
              name="play-circle-o"
              size="0.6rem"
              @click="play(item.id, item)"
            />
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { pushSong } from '@/utils/index.js'
export default {
  data () {
    return {
      value: '',
      list: [],
      list2: [],
      list3: [],
      loading: false,
      finished: false,
      page: 20,
      timeid: 0,
    };
  },

  methods: {
    play (a, b) {
      console.log(a);
      this.$store.commit('setId', a)
      this.$store.commit('setPlayNum')
      console.log(b);
      pushSong(b)
    },
    push (a) {
      console.log(a);
      let Glist = this.$store.state.List
      if (Glist.every(item => item.al.id != a.al.id)) {
        Glist.push(a)
        Toast.success('添加成功')
      } else {
        Toast.fail('歌曲已存在');
      }
      this.$store.commit('setList', Glist)

    },
    getAxios () {
      return this.axios({
        url: "/playlist/detail",
        params: {
          id: 3778678,
        },
      });
    },
    async onLoad () {
      let res = await this.getAxios()
      this.list = res.data.privileges
      this.list3 = this.list.slice(this.page, this.page + 10)
      let arr = []
      this.list3.forEach(item => { arr.push(item.id) })
      let a = arr.join(',')
      this.axios({ url: '/song/detail?ids=' + a, }).then(res => {
        let B = res.data
        if (typeof B != 'object') {
          this.finished = true
        }
        // console.log(typeof B)
        this.list2 = [...this.list2, ...res.data.songs]
        this.page = this.page + 10
        this.loading = false
      })
    },
    clear () {
      this.page = 1;
      this.finished = false;
    },
  },

};
</script>
<style scoped>
.addo {
  margin-right: 20px;
}
.logo {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}
.logo img {
  width: 100%;
  height: auto;
}
.logo .mybox {
  padding-left: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 94px;
}
.logo .mybox .top {
  background: url('../../assets/img/index_icon_2x.png') no-repeat -24px -30px;
  background-size: 166px 97px;
  width: 142px;
  height: 67px;
}
.logo .mybox .bot {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  margin-top: 10px;
}
</style>